<template>
  <view class="search-page">
    <!-- 搜索头部 -->
    <view class="search-header">
      <view class="search-box">
        <text class="iconfont icon-search"></text>
        <input 
          class="search-input"
          v-model="searchKey"
          placeholder="请输入小区或地址"
          @confirm="handleSearch"
        />
      </view>
      <text class="cancel-btn" @tap="goBack">取消</text>
    </view>

    <!-- 搜索历史 -->
    <view class="history-section" v-if="searchHistory.length && !searchKey">
      <view class="section-header">
        <text class="title">搜索历史</text>
        <text class="clear" @tap="clearHistory">清空</text>
      </view>
      <view class="history-list">
        <text 
          class="history-item" 
          v-for="(item, index) in searchHistory" 
          :key="index"
          @tap="handleHistoryTap(item)"
        >{{item}}</text>
      </view>
    </view>

    <!-- 搜索结果列表 -->
    <view class="search-result" v-if="searchKey">
      <view 
        class="house-item"
        v-for="(house, index) in searchResults"
        :key="index"
        @tap="goToDetail(house.id)"
      >
        <image class="house-img" :src="house.image" mode="aspectFill"></image>
        <view class="house-info">
          <view class="title">{{house.title}}</view>
          <view class="tags">
            <text v-for="(tag, idx) in house.tags" :key="idx" class="tag">{{tag}}</text>
          </view>
          <view class="price">
            <text class="amount">{{house.price}}</text>
            <text class="unit">元/月</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKey: '',
      searchHistory: [],
      searchResults: []
    }
  },
  onLoad() {
    // 获取本地存储的搜索历史
    const history = uni.getStorageSync('searchHistory')
    if (history) {
      this.searchHistory = JSON.parse(history)
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    handleSearch() {
      if (!this.searchKey.trim()) return
      
      // 保存搜索历史
      if (!this.searchHistory.includes(this.searchKey)) {
        this.searchHistory.unshift(this.searchKey)
        // 只保留最近10条记录
        if (this.searchHistory.length > 10) {
          this.searchHistory.pop()
        }
        uni.setStorageSync('searchHistory', JSON.stringify(this.searchHistory))
      }
      
      // 模拟搜索结果
      this.searchResults = [
        {
          id: 1,
          image: '/static/images/house-demo.jpg',
          title: '整租·观湖智造创意园·2室1厅',
          tags: ['近地铁', '随时看房'],
          price: '4500'
        },
        {
          id: 2,
          image: '/static/images/house-demo.jpg',
          title: '整租·科技园·1室1厅',
          tags: ['精装修', '拎包入住'],
          price: '3800'
        }
      ]
    },
    clearHistory() {
      this.searchHistory = []
      uni.removeStorageSync('searchHistory')
    },
    handleHistoryTap(keyword) {
      this.searchKey = keyword
      this.handleSearch()
    },
    goToDetail(id) {
      uni.navigateTo({
        url: `/pages/house/detail?id=${id}`
      })
    }
  }
}
</script>

<style lang="less">
@import '../../styles/uni.less';

.search-page {
  min-height: 100vh;
  background-color: @bg-color;
}

.search-header {
  display: flex;
  align-items: center;
  padding: @spacing-md;
  background-color: @bg-color;
  position: sticky;
  top: 0;
  z-index: 100;
  
  .search-box {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: @bg-color-grey;
    border-radius: @border-radius-lg;
    padding: @spacing-sm @spacing-md;
    
    .icon-search {
      font-size: @font-size-lg;
      color: @text-color-light;
      margin-right: @spacing-sm;
    }
    
    .search-input {
      flex: 1;
      font-size: @font-size-base;
    }
  }
  
  .cancel-btn {
    padding-left: @spacing-md;
    color: @text-color;
    font-size: @font-size-base;
  }
}

.history-section {
  padding: @spacing-md;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: @spacing-md;
    
    .title {
      color: @text-color;
      font-size: @font-size-base;
    }
    
    .clear {
      color: @text-color-light;
      font-size: @font-size-sm;
    }
  }
  
  .history-list {
    display: flex;
    flex-wrap: wrap;
    
    .history-item {
      padding: @spacing-sm @spacing-lg;
      background-color: @bg-color-grey;
      border-radius: @border-radius-lg;
      margin-right: @spacing-sm;
      margin-bottom: @spacing-sm;
      font-size: @font-size-sm;
      color: @text-color;
    }
  }
}

.search-result {
  padding: @spacing-md;
  
  .house-item {
    display: flex;
    padding: @spacing-md;
    margin-bottom: @spacing-md;
    background-color: @bg-color;
    border-radius: @border-radius-md;
    
    .house-img {
      width: 200rpx;
      height: 150rpx;
      border-radius: @border-radius-sm;
      margin-right: @spacing-md;
    }
    
    .house-info {
      flex: 1;
      
      .title {
        font-size: @font-size-base;
        color: @text-color;
        margin-bottom: @spacing-sm;
      }
      
      .tags {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: @spacing-sm;
        
        .tag {
          padding: 2rpx @spacing-sm;
          background-color: @bg-color-grey;
          color: @text-color-light;
          font-size: @font-size-sm;
          margin-right: @spacing-sm;
          margin-bottom: @spacing-xs;
          border-radius: @border-radius-sm;
        }
      }
      
      .price {
        .amount {
          font-size: @font-size-lg;
          color: @error-color;
          font-weight: bold;
        }
        
        .unit {
          font-size: @font-size-sm;
          color: @text-color-light;
          margin-left: @spacing-xs;
        }
      }
    }
  }
}
</style> 